<template>
  <div class="main-container">
    <div ref="scrollContainer" class="scroll-container" @mouseover="stopScroll($event)" @mouseleave="resumeScroll($event)">
      <ul ref="itemList" class="item-list" :style="{ animationPlayState: animationPaused ? 'paused' : 'running' }">
        <li v-for="(item, index) in alarmData" :key="index" @click="clickAlarm(item, $event)">
          <span class="title-tip">[{{ item.businessName }}]</span>
          <span class="title">{{ item.zzmc }} {{ item.alarmContent }}</span>
          <span class="date">{{ item.alarmTime }}</span>
        </li>
        <!-- 复制一份相同的内容，实现无缝滚动效果 -->
        <li v-for="(item, index) in alarmData" v-if="shouldScroll" :key="'second-' + index" @click="clickAlarm(item, $event)">
          <span class="title-tip">[{{ item.businessName }}]</span>
          <span class="title">{{ item.zzmc }} {{ item.alarmContent }}</span>
          <span class="date">{{ item.alarmTime }}</span>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      alarmData: [
        { businessName: '业务1', zzmc: '设备1', alarmContent: '告警内容1', alarmTime: '2025-03-10 10:00' },
        { businessName: '业务2', zzmc: '设备2', alarmContent: '告警内容2', alarmTime: '2025-03-10 10:05' },
        { businessName: '业务3', zzmc: '设备3', alarmContent: '告警内容3', alarmTime: '2025-03-10 10:10' },
        { businessName: '业务4', zzmc: '设备4', alarmContent: '告警内容4', alarmTime: '2025-03-10 10:15' },
        { businessName: '业务5', zzmc: '设备5', alarmContent: '告警内容5', alarmTime: '2025-03-10 10:20' },
        // { businessName: '业务6', zzmc: '设备6', alarmContent: '告警内容6', alarmTime: '2025-03-10 10:25' },
        // { businessName: '业务7', zzmc: '设备7', alarmContent: '告警内容7', alarmTime: '2025-03-10 10:30' },
        // { businessName: '业务8', zzmc: '设备8', alarmContent: '告警内容8', alarmTime: '2025-03-10 10:35' },
        // 添加更多数据
      ],
      animationPaused: false,  // 用来标记动画是否暂停
      shouldScroll: false,
    }
  },
  watch: {
    alarmData: {
      deep: true,
      handler() {
        this.$nextTick(this.checkScrollNeeded)
      }
    }
  },
  mounted() {
    this.checkScrollNeeded()
  },
  methods: {
    clickAlarm(item, event) {
      // event.stopPropagation();
      alert(JSON.stringify(item))
    },
    stopScroll(e) {
      this.$nextTick(() => {
        this.animationPaused = true;
      })
    },
    resumeScroll(e) {
      this.$nextTick(() => {
        this.animationPaused = false;
      })
    },
    checkScrollNeeded() {
      const container = this.$refs.scrollContainer
      const content = this.$refs.itemList
      console.log(content.scrollHeight, container.clientHeight)
      this.shouldScroll = content.scrollHeight > container.clientHeight
      this.animationPaused = !this.shouldScroll
    }
  }
}
</script>
<style scoped>
.main-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.scroll-container {
  width: 430px;
  height: 190px; /* 根据需要调整高度 */
  overflow: hidden;
  position: relative;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  animation: scroll 6s linear infinite;
  transform: translate3d(0, 0, 0);  /* 使用3D转换避免闪动 */
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.item-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
//border-bottom: 1px solid #ccc;
  color: #FFB300;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  position: relative; /* 确保每个 li 元素都在正确位置 */
  z-index: 100;  /* 确保每个 li 元素在最上层，避免被其他内容遮挡 */
}

.title-tip {
  color: #FFB300;
  margin-right: 8px;
}

.title {
  flex-grow: 1;
}

.date {
  color: #78909C;
}

@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);  /* 使用 3D 转换，避免闪动 */
  }
}
</style>